import {Pressable, View} from 'react-native';
import {Icon, Text, useAppTheme} from 'tsun-smart-ui';
import DeviceState from '../DeviceInfo/DeviceState';
import DeviceAlarm from '../DeviceInfo/DeviceAlarm';
import {useDeviceInfo} from '../DeviceInfo/DeviceInfoContext';
import InfoCard from '../DeviceInfo/DeviceInfoCard';
import {useTranslation} from 'react-i18next';
import {template} from '@beqa/react-slots';
import Logo from '../Logo';
const CardTitle = ({
  title,
  icon,
  power,
  onPress,
}: {
  title: string;
  icon: React.ReactNode;
  power?: number;
  onPress?: () => void;
}) => {
  const theme = useAppTheme();
  return (
    <View className="flex-row flex-between">
      <View className="flex-row items-center">
        {icon}
        <Text className=" ml-2" variant="bodyStrong">
          {title}
        </Text>
      </View>
      <Pressable className="flex-row items-center gap-x-[6]" onPress={onPress}>
        <Text
          style={{
            color: theme.colors?.neutral?.primary,
          }}
          className="font-heading">
          总
        </Text>
        <Icon
          name="pull"
          size={12}
          color={theme.colors?.neutral?.primary}></Icon>
      </Pressable>
    </View>
  );
};
const Electricity = () => {
  const theme = useAppTheme();
  const deviceData = useDeviceInfo();
  const {t} = useTranslation();
  const {
    pvTotalPower,
  } = useDeviceInfo();
  const sections: {
    key: string;
    render: React.ReactNode;
  }[] = [
    {
      key: 'pvPower',
      render: (
        <InfoCard
          items={[
            {label: '频率', value: '50.00', unit: 'Hz'},
            {label: '电压', value: out.voltage || '50.00', unit: 'V'},
            {label: '电流', value: out.current || '50.00', unit: 'A'},
            {label: '功率因素', value: '0.95', unit: ''},
            {
              label: '无功功率',
              value: ((out.powerTotal || 0) * 0.3).toFixed(2),
              unit: 'kVar',
            },
            {
              label: '视在功率',
              value: ((out.powerTotal || 0) * 1.05).toFixed(2),
              unit: 'kVA',
            },
            {label: '有功功率', value: out.powerTotal || '50.00', unit: 'kW'},
          ]}
          title={
            <CardTitle
              title={'实时数据'}
              power={out.powerTotal}
              onPress={() => {}}
              icon={<Logo name="currentTime" backgroundColor={theme.colors?.brand?.primaryLight!} color={theme.colors?.brand?.primary!} size={24} />}
            />
          }
        />
      ),
    },
    {
      key: 'outputPower',
      render: (
        <InfoCard
          title={
            <CardTitle
              title={'统计数据'}
              power={out.powerTotal}
              icon={
                <Logo name="device-statistics" backgroundColor={theme.colors?.brand?.primaryLight!} color={theme.colors?.brand?.primary!} size={24} />
              }
            />
          }
          items={[
            {
              label: '日正向总电能',
              value: powerGen.genDay || '50.00',
              unit: 'kWh',
            },
            {label: '日反向总电能', value: '0.00', unit: 'kWh'},
            {
              label: '总正向总电能',
              value: powerGen.genTotal || '50.00',
              unit: 'kWh',
            },
            {label: '总反向总电能', value: '0.00', unit: 'kWh'},
            {
              label: '正向无功电能',
              value: ((powerGen.genTotal || 0) * 0.1).toFixed(2),
              unit: 'kVarh',
            },
            {label: '反向无功电能', value: '0.00', unit: 'kVarh'},
            {
              label: '总有功电能',
              value: powerGen.genTotal || '50.00',
              unit: 'kWh',
            },
          ]}
        />
      ),
    },
  ];
  return (
    <View>
      <DeviceState>
        <template.powerState>
          {value => (
            <Text
              style={{
                color: theme.colors?.neutral?.primary,
              }}>
              电网状态: <Text>{value.powerState}</Text>
            </Text>
          )}
        </template.powerState>
      </DeviceState>
      {sections.map(section => (
        <View className="mb-3" key={section.key}>
          {section.render}
        </View>
      ))}
      <DeviceAlarm></DeviceAlarm>
    </View>
  );
};

export default Electricity;
